<template>
  <div>
    <h1>我是子组件</h1>
    <h1>{{ myname }}</h1>
    <h1>{{ namearr }}</h1>
    <button @click="sendata">子传父数据</button>
    <hr />
    <slot name="home"></slot>
    <hr />
    <slot name="cart"></slot>
  </div>
</template>
<script lang="ts">
import { ref, computed } from 'vue'
export default {
  props: ['myname', 'myhobby'],
  setup (props: any, ctx: any) {
    console.log(props) //父传子的数据
    // attrs 除props外 父传子的数据
    console.log(ctx.attrs)
    // slots 获取到父组件给子组件预留插槽
    console.log(ctx.slots)
    //

    // 计算属性
    let namearr = computed(() => {
      let namestr = props.myname
        .split('')
        .reverse()
        .join('')
      return namestr
    })
    //--------------------
    let str = ref('不许跟爹这么说话')
    let sendata = () => {
      // 触发父组件的自定义事件 并传递数据
      ctx.emit('sendmsg', str)
    }
    return {
      namearr,
      sendata
    }
  }
}
</script>
